<div class="footer">
    <style>
        /* 网页底部 start*/
        #footer {
            color: #333;
            width: 100%;
            border-top: 1px solid #d04;
        }

        #footer-top {
            width: 100%;
        }

        .footer-top .iconFooter {
            color: #d04;
            font-size: 48px;
            margin-right: 12px;
        }

        .footer-top {
            width: 1200px;
            margin: 0px auto;
        }

        .footer-top>ul {
            display: flex;
            justify-content: space-between;
            font-size: 16px;
            font-weight: bold;
            padding-top: 30px;
        }

        .footer-top>ul>li {
            height: 50px;
            display: flex;
            align-items: center;
        }

        .footer-top .spacer {
            border-left: 1px solid #ddd;
        }

        #footer-middle {
            width: 100%;
            margin-top: 50px;
        }

        .footer-middle {
            width: 1200px;
            margin: 0 auto;
            border-top: 1px solid #ddd;
            padding-top: 20px;
            display: flex;
            justify-content: space-between;
        }

        .footer-middle>ul {
            display: flex;
            justify-content: left;
            box-sizing: border-box;
            padding: 0px 15px;
        }

        .footer-middle>ul>li dt {
            font-size: 14px;
            font-weight: bold;
            width: 124px;
            margin-bottom: 7px;
        }

        .footer-middle>ul>li dd {
            font-size: 13px;
            color: #666;
        }

        .footer-middle>ul .spacer {
            border-left: 1px solid #ddd;
            margin-right: 54px;
        }

        .footer-middle>div {
            font-size: 13px;
        }

        .footer-middle>div img {
            float: left;
            margin-right: 8px;
        }

        .footer-middle>div p {
            color: #666;
            overflow: hidden;
            white-space: nowrap;
        }

        .footer-middle>div>p:nth-child(1) {
            color: #333;
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 7px;
        }

        #footer-bottom {
            width: 100%;
        }

        .footer-bottom {
            width: 1200px;
            margin: 20px auto 0;
            border-top: 1px solid #ddd;
            padding-top: 20px;
            text-align: center;
        }

        .footer-bottom ul {
            margin: 20px auto 0;
            padding-bottom: 20px;
            display: flex;
            justify-content: center;
        }

        .footer-bottom ul li {
            margin: 0px 2px;
        }

        /* 网页底部 end*/
    </style>
    <div id="footer-top">
        <div class="footer-top">
            <ul>
                <li>
                    <svg class="icon iconFooter" aria-hidden="true">
                        <use xlink:href="#icon-dianpu"></use>
                    </svg>
                    <span>正品保障，购物无忧</span>
                </li>
                <li class="spacer"></li>
                <li>
                    <svg class="icon iconFooter" aria-hidden="true">
                        <use xlink:href="#icon-peisong"></use>
                    </svg>
                    <span>全类覆盖，一站购齐</span>
                </li>
                <li class="spacer"></li>
                <li>
                    <svg class="icon iconFooter" aria-hidden="true">
                        <use xlink:href="#icon-301"></use>
                    </svg>
                    <span>全国配送，送货到桌</span>
                </li>
                <li class="spacer"></li>
                <li>
                    <svg class="icon iconFooter" aria-hidden="true">
                        <use xlink:href="#icon-kefu"></use>
                    </svg>
                    <span>在线客服，贴身顾问</span>
                </li>
            </ul>
        </div>
    </div>
    <div id="footer-middle">
        <div class="footer-middle">
            <ul>
                <li>
                    <dl>
                        <dt>购物指南</dt>
                        <dd>常见问题</dd>
                        <dd>发票流程</dd>
                        <dd>购物流程</dd>
                    </dl>
                </li>
                <li class="spacer"></li>
                <li>
                    <dl>
                        <dt>配送方式</dt>
                        <dd>配送物流查询</dd>
                        <dd>配送时间与方式</dd>
                        <dd>得力紧急服务方案</dd>
                    </dl>
                </li>
                <li class="spacer"></li>
                <li>
                    <dl>
                        <dt>支付方式</dt>
                        <dd>支付方式</dd>
                        <dd>货到付款</dd>
                        <dd>在线支付</dd>
                    </dl>
                </li>
                <li class="spacer"></li>
                <li>
                    <dl>
                        <dt>售后服务</dt>
                        <dd>退换货政策</dd>
                        <dd>退换货流程</dd>
                        <dd>联系售后</dd>
                    </dl>
                </li>
                <li class="spacer"></li>
                <li>
                    <dl>
                        <dt>关于得力</dt>
                        <dd>公司简介</dd>
                        <dd>联系我们</dd>
                        <dd>在线客服</dd>
                    </dl>
                </li>
                <li class="spacer"></li>
            </ul>
            <div>
                <p>微信公众号</p>
                <img src="./images/index/head/QRcode.jpg" alt="">
                <p>扫一扫！关注得力办公商城</p>
                <p>售前热线：400-168-0888</p>
                <p>售后热线：400-185-0555</p>
                <p>工作日：08:00-17:00</p>
            </div>
        </div>
    </div>
    <div id="footer-bottom">
        <div class="footer-bottom">
            <p class="Copyright">Copyright&copy;2014-2021 得力集团 版权所有 浙ICP备06004512号</p>
            <ul>
                <li><a href=""><img src="./images/index/footer/blxx.jpg" alt=""></a></li>
                <li><a href=""><img src="./images/index/footer/wljc.jpg" alt=""></a></li>
                <li><a href=""><img src="./images/index/footer/zgwm.jpg" alt=""></a></li>
                <li><a href=""><img src="./images/index/footer/gswj.jpg" alt=""></a></li>
                <li><a href=""><img src="./images/index/footer/cxwz.jpg" alt=""></a></li>
            </ul>
        </div>
    </div>
</div>

<div class="header">
    <style>
        /* head */
        #header {
            width: 100%;
        }

        #header>div {
            width: 100%;
        }

        /* 头部顶端样式 */
        #head-top {
            background-color: #f4f4f4;
        }

        .head-top {
            font-size: 12px;
            width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .head-top>.head-t-l {
            color: #616161;
            display: flex;
        }

        .head-top>.head-t-l>div {
            margin-left: 20px;
            display: flex;
        }

        .head-top>.head-t-r {
            color: #777777;
            list-style: none;
            display: flex;
            align-items: center;
        }

        .head-top>.head-t-r>li {
            margin-left: 5px;
            line-height: 28px;
        }

        .head-top>.head-t-r>.space {
            width: 1px;
            height: 12px;
            background-color: #ccc;
        }

        /* 头部中间样式 */
        .head-middle {
            width: 1200px;
            margin: 0 auto;
            padding: 20px 0px 30px 0px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
        }

        .head-middle>.head-middle-search>ul {
            display: flex;
        }

        .head-middle .head-middle-shoppingCart {
            background-color: #d04;
            color: white;
            width: 90px;
            height: 32px;
            line-height: 32px;
            font-size: 16px;
        }

        .head-middle .head-middle-shoppingCart>.iconCart {
            font-size: 16px;
            color: white;
        }



        .head-middle>.QR-code {
            text-align: center;
        }

        /* 头部底端样式 */
        #head-bottom {
            border-bottom: 2px solid #d04;
        }

        .head-bottom {
            width: 1200px;
            margin: 0px auto;
            display: flex;
            font-size: 16px;
        }

        .head-bottom>#allClassificationOfGoods {
            background-color: #d04;
            color: white;
            font-size: 16px;
            box-sizing: border-box;
            width: 200px;
            height: 34px;
            padding-left: 20px;
            line-height: 34px;
        }

        .head-bottom>ul {
            display: flex;
            padding-left: 20px;
            color: #666;
            font-family: "微软雅黑";
            font-weight: bold;
            line-height: 34px;
        }

        .head-bottom>ul>li {
            padding: 0px 20px;
        }
        
        .exit:hover{
            cursor: pointer;
        }
    </style>
    <div id="head-top">
        <div class="head-top">
            <div class="head-t-l">
                <p>欢迎光临得力办公商城</p>
                <div>
                    <span>配送至：</span>
                    <div></div>
                </div>
            </div>
            <div class="head-t-c"><a href=""><i></i><span>得力集团官网</span></a></div>
            <ul class="head-t-r">
                <li><span class="un"></span><span class="exit">,退出</span></li>
                <li class="space"></li>
                <li><a href="../cart.html">我的订单</a></li>
                <li class="space"></li>
                <li><a href="../personalCenter.html">我的得力</a></li>
            </ul>
        </div>
    </div>
    <div id="head-middle">
        <div class="head-middle">
            <h1><a href="../index.html"><img src="./images/index/head/logo.jpg" alt=""></a></h1>
            <div class="head-middle-search">
                <div>
                    <input type="text">
                    <img src="" alt="">
                </div>
                <ul>
                    <li>测温仪</li>
                    <li>消毒液</li>
                    <li>口罩</li>
                    <li>复印纸</li>
                    <li>文件夹</li>
                    <li>计算器</li>
                    <li>剪刀</li>
                    <li>订书机</li>
                </ul>
            </div>
            <a href="../cart.html">
            <div class="head-middle-shoppingCart">
                <svg class="icon iconCart" aria-hidden="true">
                    <use xlink:href="#icon-24gl-cartFull10"></use>
                </svg>
                购物车
            </div>
            </a>
            <div class="QR-code">
                <img src="./images/index/head/QRcode.jpg" alt="">
                <p>关注微信公众号</p>
            </div>
        </div>
    </div>
    <div id="head-bottom">
        <div class="head-bottom">
            <div id="allClassificationOfGoods">
                <svg class="icon iconCaidan" aria-hidden="true">
                    <use xlink:href="#icon-caidan"></use>
                </svg>
                <b>所有商品分类</b>
            </div>
            <ul>
                <li>首页</li>
                <li>采购专区</li>
                <li>得力商城</li>
                <li>工业品商城</li>
                <li>场景采购</li>
                <li>产品定制</li>
                <li>智能办公</li>
                <li>快递订单</li>
                <li>耗材搜索器</li>
            </ul>
        </div>
    </div>
</div>